<template>

  <div class="main-content" style="width: 60%;">
    <div class="card" style="margin-bottom: 5px ;padding: 20px">
      <div>
        <el-button type="danger" plain @click="delBatch">批量删除</el-button>
      </div>
      <el-table stripe :data="data.tableData" @selection-change="handleSelectionChange">
        <el-table-column  type="selection" width="55"/>
        <el-table-column prop="bookCover" label="图书封面">
          <template #default="scoped">
            <img :src="scoped.row.bookCover" style="width: 80px">
          </template>
        </el-table-column>
        <el-table-column prop="bookName" label="图书名称"></el-table-column>
        <el-table-column prop="num" label="数量">
          <template #default="scoped">
            <el-input-number v-model="scoped.row.num" :min="1"/>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="添加日期"></el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template v-slot="scope">
            <el-button type="danger" circle :icon="Delete" @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 15px;text-align: center">
        <el-button @click="addOrder" type="danger" style="width: 150px;height: 40px">批量借阅</el-button>
      </div>
    </div>
  </div>

  
</template>
<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit} from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_BASE_URL

  const data=reactive({
    formVisible:false,
    form:{},
    tableData:[],
    pageNum:1,
    pageSize:5,
    total:0,
    cartList:[]
  })
  const handleAdd = () =>{
    data.form={}
    data.formVisible=true
  }

const addOrder = () =>{
  if(!data.cartList.length){
    ElMessage.warning('请选择图书')
  }
  data.form.cartList=data.cartList
  request.post('/orders/add',data.form).then(res=>{
    if(res.code === '200'){
      ElMessage.success("借阅成功")
      load()
    }else {
      ElMessage.error(res.msg)
    }
  })
}

  const add = () =>{
    request.post('/cart/add',data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success("操作成功")
        data.formVisible=false
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }
  const handleEdit = (row) =>{
    data.form=JSON.parse(JSON.stringify(row))
    data.formVisible=true
  }


  const load = () =>{
    request.get('/cart/selectAll').then(res=>{
      if(res.code === "200"){
        data.tableData=res.data
      }
    })
  }

  const update = () => {
    request.put('/cart/update', data.form).then(res=>{
      if(res.code === '200'){
        ElMessage.success('操作成功');
        data.formVisible=false
        load()
      }
    })
  }

  const del = (id) =>{
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
      request.delete('/cart/delete/'+id).then(res=>{
       if (res.code === '200'){
         ElMessage.success("删除成功")
         load()
       }else {
         ElMessage.error(res.msg)
       }
      })
    }).catch(err=>{
      console.error(err)
    })
  }
  
  const delBatch = () => {
    if (!data.ids.length){
      ElMessage.error("请选择数据")
      return
    }
    ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗','删除确认',{type:'warning'}).then(res=>{
      request.delete('/cart/delete/batch',{data:data.ids}).then(res=>{
        if (res.code === '200'){
          ElMessage.success("删除成功")
          load()
        }
        else {
          ElMessage.error(res.msg)
        }
      })
    }).catch(err=>{
      console.error(err)
    })
  }

  const handleSelectionChange = (rows) => {
    data.cartList=rows
  }



  const save =()=>{
    data.form.id?update():add()
  }

  const reset = () =>{
    load()
  }
  load()
</script>